<?php
// 初始化游戏棋盘数据
$boardSize = 8;
$colors = ['red', 'blue', 'green', 'yellow', 'purple'];
$board = [];
for ($i = 0; $i < $boardSize; $i++) {
    $row = [];
    for ($j = 0; $j < $boardSize; $j++) {
        $randomColor = $colors[array_rand($colors)];
        $row[] = $randomColor;
    }
    $board[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对对碰游戏</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
        }

        .purple {
            background-color: purple;
        }
    </style>
</head>

<body>
    <table id="game-board">
        <?php
        foreach ($board as $i => $row) {
            echo '<tr>';
            foreach ($row as $j => $color) {
                echo '<td class="' . $color . '" data-row="' . $i . '" data-col="' . $j . '"></td>';
            }
            echo '</tr>';
        }
        ?>
    </table>

    <script>
        const board = document.getElementById('game-board');
        let firstCell = null;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD') {
                const cell = event.target;
                if (firstCell === null) {
                    firstCell = cell;
                    cell.style.border = '2px solid white';
                } else {
                    const row1 = parseInt(firstCell.dataset.row);
                    const col1 = parseInt(firstCell.dataset.col);
                    const row2 = parseInt(cell.dataset.row);
                    const col2 = parseInt(cell.dataset.col);

                    // 检查是否相邻
                    if ((Math.abs(row1 - row2) === 1 && col1 === col2) || (Math.abs(col1 - col2) === 1 && row1 === row2)) {
                        // 交换颜色
                        const tempColor = firstCell.className;
                        firstCell.className = cell.className;
                        cell.className = tempColor;

                        // 检查是否有匹配
                        if (checkMatches()) {
                            // 移除匹配的元素
                            removeMatches();
                        } else {
                            // 交换回来
                            const tempColor2 = firstCell.className;
                            firstCell.className = cell.className;
                            cell.className = tempColor2;
                        }
                    }

                    firstCell.style.border = '1px solid #000';
                    firstCell = null;
                }
            }
        });

        function checkMatches() {
            const cells = board.querySelectorAll('td');
            for (let i = 0; i < cells.length; i++) {
                const cell = cells[i];
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                const color = cell.className;

                // 检查水平匹配
                if (col < board.rows[row].cells.length - 2) {
                    const nextCell1 = board.rows[row].cells[col + 1];
                    const nextCell2 = board.rows[row].cells[col + 2];
                    if (nextCell1.className === color && nextCell2.className === color) {
                        return true;
                    }
                }

                // 检查垂直匹配
                if (row < board.rows.length - 2) {
                    const nextRowCell1 = board.rows[row + 1].cells[col];
                    const nextRowCell2 = board.rows[row + 2].cells[col];
                    if (nextRowCell1.className === color && nextRowCell2.className === color) {
                        return true;
                    }
                }
            }
            return false;
        }

        function removeMatches() {
            const cells = board.querySelectorAll('td');
            for (let i = 0; i < cells.length; i++) {
                const cell = cells[i];
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                const color = cell.className;

                // 检查水平匹配
                if (col < board.rows[row].cells.length - 2) {
                    const nextCell1 = board.rows[row].cells[col + 1];
                    const nextCell2 = board.rows[row].cells[col + 2];
                    if (nextCell1.className === color && nextCell2.className === color) {
                        cell.className = '';
                        nextCell1.className = '';
                        nextCell2.className = '';
                    }
                }

                // 检查垂直匹配
                if (row < board.rows.length - 2) {
                    const nextRowCell1 = board.rows[row + 1].cells[col];
                    const nextRowCell2 = board.rows[row + 2].cells[col];
                    if (nextRowCell1.className === color && nextRowCell2.className === color) {
                        cell.className = '';
                        nextRowCell1.className = '';
                        nextRowCell2.className = '';
                    }
                }
            }
        }
    </script>
</body>

</html><?php
// 初始化游戏棋盘数据
$boardSize = 8;
$colors = ['red', 'blue', 'green', 'yellow', 'purple'];
$board = [];
for ($i = 0; $i < $boardSize; $i++) {
    $row = [];
    for ($j = 0; $j < $boardSize; $j++) {
        $randomColor = $colors[array_rand($colors)];
        $row[] = $randomColor;
    }
    $board[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对对碰游戏</title>
    <style>
        table {
            border-collapse: collapse;
        }

        td {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
        }

        .purple {
            background-color: purple;
        }
    </style>
</head>

<body>
    <table id="game-board">
        <?php
        foreach ($board as $i => $row) {
            echo '<tr>';
            foreach ($row as $j => $color) {
                echo '<td class="' . $color . '" data-row="' . $i . '" data-col="' . $j . '"></td>';
            }
            echo '</tr>';
        }
        ?>
    </table>

    <script>
        const board = document.getElementById('game-board');
        let firstCell = null;

        board.addEventListener('click', function (event) {
            if (event.target.tagName === 'TD') {
                const cell = event.target;
                if (firstCell === null) {
                    firstCell = cell;
                    cell.style.border = '2px solid white';
                } else {
                    const row1 = parseInt(firstCell.dataset.row);
                    const col1 = parseInt(firstCell.dataset.col);
                    const row2 = parseInt(cell.dataset.row);
                    const col2 = parseInt(cell.dataset.col);

                    // 检查是否相邻
                    if ((Math.abs(row1 - row2) === 1 && col1 === col2) || (Math.abs(col1 - col2) === 1 && row1 === row2)) {
                        // 交换颜色
                        const tempColor = firstCell.className;
                        firstCell.className = cell.className;
                        cell.className = tempColor;

                        // 检查是否有匹配
                        if (checkMatches()) {
                            // 移除匹配的元素
                            removeMatches();
                        } else {
                            // 交换回来
                            const tempColor2 = firstCell.className;
                            firstCell.className = cell.className;
                            cell.className = tempColor2;
                        }
                    }

                    firstCell.style.border = '1px solid #000';
                    firstCell = null;
                }
            }
        });

        function checkMatches() {
            const cells = board.querySelectorAll('td');
            for (let i = 0; i < cells.length; i++) {
                const cell = cells[i];
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                const color = cell.className;

                // 检查水平匹配
                if (col < board.rows[row].cells.length - 2) {
                    const nextCell1 = board.rows[row].cells[col + 1];
                    const nextCell2 = board.rows[row].cells[col + 2];
                    if (nextCell1.className === color && nextCell2.className === color) {
                        return true;
                    }
                }

                // 检查垂直匹配
                if (row < board.rows.length - 2) {
                    const nextRowCell1 = board.rows[row + 1].cells[col];
                    const nextRowCell2 = board.rows[row + 2].cells[col];
                    if (nextRowCell1.className === color && nextRowCell2.className === color) {
                        return true;
                    }
                }
            }
            return false;
        }

        function removeMatches() {
            const cells = board.querySelectorAll('td');
            for (let i = 0; i < cells.length; i++) {
                const cell = cells[i];
                const row = parseInt(cell.dataset.row);
                const col = parseInt(cell.dataset.col);
                const color = cell.className;

                // 检查水平匹配
                if (col < board.rows[row].cells.length - 2) {
                    const nextCell1 = board.rows[row].cells[col + 1];
                    const nextCell2 = board.rows[row].cells[col + 2];
                    if (nextCell1.className === color && nextCell2.className === color) {
                        cell.className = '';
                        nextCell1.className = '';
                        nextCell2.className = '';
                    }
                }

                // 检查垂直匹配
                if (row < board.rows.length - 2) {
                    const nextRowCell1 = board.rows[row + 1].cells[col];
                    const nextRowCell2 = board.rows[row + 2].cells[col];
                    if (nextRowCell1.className === color && nextRowCell2.className === color) {
                        cell.className = '';
                        nextRowCell1.className = '';
                        nextRowCell2.className = '';
                    }
                }
            }
        }
    </script>
</body>

</html>